<div nz-row [nzGutter]="8" class="userG userInfo">
    <div nz-col [nzSpan]="20" [nzOffset]="2">
        
        <div nz-col [nzSpan]="4">
            <nz-avatar [nzText]="D_name"
                      nzSize="large"
                      [ngStyle]="{'background-color':'#f56a00'}">
            </nz-avatar>
        </div>
        <div nz-col [nzSpan]="16">
            <h4>{{ user.name }}</h4>
            <p>加入时间：{{ user.date }}</p>
            <p>共消费:¥{{ user.sumPrice }}</p>
        </div>

    </div>
</div>
<div nz-row [nzGutter]="8" class="userG NewClass">
    <div nz-col [nzSpan]="20" [nzOffset]="2" *ngIf="!loading">
        
      <div nz-col [nzSpan]="17">
          <nz-input [(ngModel)]="kaClass" name="kaClass" [nzType]="'text'" [nzRows]="'4'" [nzPlaceHolder]="'Class name'"></nz-input>
      </div>
      <div nz-col [nzSpan]="3">
        <button nz-button (click)="createClass()" [nzType]="'primary'" [nzSize]="'small'">
          New class
        </button>
      </div>
        
    </div>
    <div nz-col [nzSpan]="20" [nzOffset]="2" *ngIf="loading">
        <div nz-col [nzSpan]="2" [nzOffset]="6">
            <nz-spin></nz-spin>
        </div>
    </div>
</div>
<!--
  list
-->
<div nz-row [nzGutter]="8" class="userG userClasslist">
    <div nz-col [nzSpan]="20" [nzOffset]="2" *ngIf="classArray.length > 0">
      <nz-collapseset [nzBordered]="false">
        <nz-collapse *ngFor="let cls of classArray" [nzTitle]="cls.name" [nzActive]="cls.active">
          <p>name:{{cls.name}}</p>
          <p>sum:{{cls.count}}</p>
          <p>price:{{cls.sum}}</p>
        </nz-collapse>
      </nz-collapseset>
    </div>
</div>
